<template>
  <div class="app-container">
    <div>
      <div class="filter-container">
        <el-input v-model="listQuery.person_id" :placeholder="$t('table.worker_id')" style="width: 200px;" clearable @change="handleFilter" />
        <el-input v-model="listQuery.name" :placeholder="$t('table.worker_name')" style="width: 200px;" clearable @change="handleFilter" />
        <el-date-picker
          v-model="listQuery.time"
          :start-placeholder="$t('table.start_time')"
          :end-placeholder="$t('table.end_time')"
          type="datetimerange"
          value-format="yyyy-MM-dd"
          range-separator="一"
          format="yyyy-MM-dd"
          @change="handleFilterone" />
        <el-button type="primary" size="small" @click="getLists">{{ $t('table.search') }}</el-button>
        <el-button type="primary" size="small" @click="getExcel">{{ $t('table.export') }}</el-button>
        <el-button
          v-if="is_son == false? Summary =$t('table.view_summary'): Summary = $t('table.view_overtimeLate')"
          type="primary"
          size="small"
          @click="showDialog">{{ Summary }}</el-button>
      </div>
      <div v-if="is_son == false? is_switch = $t('menu.late_and_leave_early_report')+'：' : is_switch = $t('table.summary')+'：'" class="switch">
        {{ is_switch }}</div>
      <div v-if="is_switchover">
        <el-table
          v-loading="listLoading"
          :data="list"
          :header-cell-style="{
            background: '#f2f2f2',
            color: '#606266',
            height: '10px',
            padding: '5px'
          }"
          :row-style="{ height: '40px', padding: '0px' }"
          :cell-style="{ padding: '0px' }"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          height="637px"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column :label="$t('table.worker_id')" align="center">
            <template slot-scope="scope">
              {{ scope.row.person_id }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.worker_name')" align="center">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.company')" align="center">
            <template slot-scope="scope">
              {{ scope.row.company }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.department')" align="center">
            <template slot-scope="scope">
              {{ scope.row.department }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.attendance_date')" align="center">
            <template slot-scope="scope">
              {{ scope.row.day }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.worktime_period')" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.period_id == null">{{$t('table.NormalOvertime')}}</span>
              <span else>{{ scope.row.period_name }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.check_time')" align="center">
            <template slot-scope="scope">
              {{ scope.row.check_time }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.check_out_time')" align="center">
            <template slot-scope="scope">
              {{ scope.row.leave_time }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.attendance_status')" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.is_late == '1' && scope.row.is_leave_early == '0' ">{{ is_late }}</span>
              <span v-else-if="scope.row.is_late == '1' && scope.row.is_leave_early == '1' ">{{ BeLateAndLeave }}</span>
              <span v-else-if="scope.row.is_leave_early == '1'">{{ LeaveEarly }}</span>
              <span v-else-if="scope.row.is_late == '0' && scope.row.is_leave_early == '0' ">{{ Normal }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.total_attendance')" align="center">
            <template slot-scope="scope">
              {{ scope.row.work_time }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.remark')" align="center">
            <template slot-scope="scope">
              {{ scope.row.desc }}
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="current_page"
            :page-sizes="[10, 50, 100]"
            :page-size="per_page"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
    <summaryid v-show="is_son" :list-query="listQuery" />
  </div>
</template>

<script>
import store from '@/store'
import { parseTime } from '@/utils/index'
import summaryid from './summaryid'
import {
  employee_attendance_interval_get_list,
  employee_attendance_interval_get_select,
  service_summaryAll
} from '@/api/StatisticalReports/StatisticalReports'

export default {
  components: {
    summaryid
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      is_late: this.$t('table.late'),
      LeaveEarly: this.$t('table.leave_early'),
      BeLateAndLeave: this.$t('table.beLateAndLeave'),
      Normal: this.$t('table.normal'),
      is_switch: this.$t('menu.late_and_leave_early_report'),
      Summary: this.$t('table.summary'),
      is_son: false,
      dialog_visible: false,
      is_switchover: true,
      list: null,
      listLoading: true,
      total: null,
      multipleSelection: [],
      current_page: null,
      last_page: null,
      per_page: null,
      listQuery: {
        beginTime: undefined,
        endTime: undefined,
        name: undefined,
        time: [],
        ov: 0,
        person_id: undefined,
        page: 1,
        pagesize: 10
      }
    }
  },
  created() {
    this.getLists()
    const timestamp = new Date().getTime()
    this.listQuery.beginTime = this.time(timestamp - 2592000000)
    this.listQuery.endTime = this.time(timestamp)
    this.listQuery.time[0] = this.listQuery.beginTime
    this.listQuery.time[1] = this.listQuery.endTime
    console.log(this.time(timestamp), 'tttttttttttttttttt')
  },
  methods: {
    time(time) {
      var date = new Date(time + 8 * 3600 * 1000)
      return date.toJSON().substr(0, 10).replace('T', ' ').replace(/-/g, '-')
    },
    // 获取展示列表数据
    getLists() {
      this.listLoading = true
      // 报表数据
      employee_attendance_interval_get_list(
        store.getters.token,
        this.listQuery
      ).then((res) => {
        console.log(res, 'ddddasdas')
        if (res.data.status) {
          this.list = res.data.list.data
          this.current_page = res.data.list.current_page
          this.per_page = res.data.list.per_page
          this.last_page = res.data.list.last_page
          this.total = res.data.list.total
          this.person_id = res.data.list.data.person_id
          console.log(res.data)
          this.listLoading = false
        }
      })
    },
    // 分页相关方法
    handleFilter() {
      this.listQuery.page = 1
      this.getLists()
    },
    handleFilterone(val) {
      this.listQuery.beginTime = val[0]
      this.listQuery.endTime = val[1]
      this.getLists()
    },
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.getLists()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getLists()
    },
    handleSelectionChange(val) {
      this.multipleSelection = []
      val.forEach((item) => {
        this.multipleSelection.push(item.device_id)
      })
    },
    // 切换汇总 和报表
    showDialog() {
      this.is_switchover = !this.is_switchover
      this.is_son = !this.is_son
    },
    // 导出报表
    getExcel() {
      // 导出报表
      // 当前时间
      if (this.is_son == false) {
        const date = new Date() // 时间戳为10位需乘1000，为13位则不用
        const Y = date.getFullYear() // 年
        const M =
          date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1)
            : date.getMonth() + 1 // 月
        const D =
          date.getDate() < 10 ? '0' + date.getDate() + '' : date.getDate()
        const date_time = Y + '-' + M + '-' + D
        employee_attendance_interval_get_select(store.getters.token).then(
          (res) => {
            this.export = res.data.list
            import('@/vendor/Export2Excel').then((excel) => {
              const tHeader = [
                this.$t('table.worker_id'),
                this.$t('table.worker_name'),
                this.$t('table.company'),
                this.$t('table.department'),
                this.$t('table.attendance_date'),
                this.$t('table.worktime_period'),
                this.$t('table.check_time'),
                this.$t('table.check_out_time'),
                this.$t('table.over_time')
              ]
              // '工号',
              // '姓名',
              // '公司',
              // '部门',
              // '考勤日期',
              // '工作时段',
              // '签到时间',
              // '签退时间',
              // '考勤状态(1:正常  0:迟到)',
              // '时长(分钟)'
              const filterVal = [
                'person_id',
                'name',
                'company',
                'department',
                'day',
                'period_name',
                'check_time',
                'leave_time',
                'work_time'
              ]
              const list = res.data.list
              const data = this.formatJson(filterVal, list)
              excel.export_json_to_excel({
                header: tHeader,
                data,
                filename: this.$t('menu.late_and_leave_early_report') + ' ' + date_time,
                autoWidth: true,
                bookType: 'xlsx'
              })
            })
          }
        )
      } else {
        const date = new Date() // 时间戳为10位需乘1000，为13位则不用
        const Y = date.getFullYear() // 年
        const M =
          date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1)
            : date.getMonth() + 1 // 月
        const D =
          date.getDate() < 10 ? '0' + date.getDate() + '' : date.getDate()
        const date_time = Y + '-' + M + '-' + D
        service_summaryAll(store.getters.token).then((res) => {
          this.export = res.data.data.data
          import('@/vendor/Export2Excel').then((excel) => {
            const tHeader = [
              this.$t('table.worker_id'),
              this.$t('table.worker_name'),
              this.$t('table.company'),
              this.$t('table.department'),
              this.$t('table.late_total'),
              this.$t('table.late_time'),
              this.$t('table.leave_early_total'),
              this.$t('table.leave_early_time')
            ]
            // "工号",
            // "姓名",
            // "公司",
            // "部门",
            // "迟到次数(次)",
            // "迟到时长(分钟)",
            // "早退次数(次)",
            // "早退时长(分钟)",
            const filterVal = [
              'person_id',
              'name',
              'company',
              'department',
              'late_total',
              'late_time',
              'leave_early_total',
              'leave_early_time'
            ]
            const list = res.data.data.data
            const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: this.$t('menu.late_and_leave_early_report')+'' + this.$t('table.summary') + date_time,
              autoWidth: true,
              bookType: 'xlsx'
            })
          })
        })
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    }
  }
}
</script>

<style></style>

<style scoped>
.pagination-container {
  margin-top: 25px;
}
.switch {
  margin: 0 0 10px 20px;
}
.app-container {
  border-top: #eee solid 10px;
}
</style>
